<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            width: 300px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="input-group">
        <input id="demo" type="text">
        <span id="tips"><i>123123</i></span>
    </div>
    <button id="btn">点击</button>
</body>
<script>



    var demo = document.getElementById("demo");
    var btn = document.getElementById("btn");
    var tips = document.getElementById("tips");

    btn.onclick = function () {

        // 表单元素取值和赋值
        // console.log(demo.value);  //取值
        // var con = demo.value;  // 先取值 在赋值给变量 con
        // console.log(con);
        // con = "hello";   // 对变量con重新赋值  => 

        // 能改变元素的只有元素本身
        // demo.value = "hello";

        // 非表单元素取值和赋值  innerHTML  innerText
        // innerHTML  获取和设置非表单元素内的html结构/文本结构
        // innerText  获取和设置非表单元素内的文本结构 (如果赋值html结构 会原样输出,并不会被浏览器解析)

        // 取值
        // console.log(tips.innerHTML);
        // console.log(tips.innerText);

        // 赋值
        // tips.innerHTML = `<a href="https://www.baidu.com">百度</a>`
        // tips.innerHTML = `对对对`;

        // 赋值
        // tips.innerText = `<a href="https://www.baidu.com">百度</a>`
        tips.innerText = `对对对`;







    }




</script>

</html>